<template>
  <div class="container">
    <!-- 顶部导航信息栏 -->
    <TopBar></TopBar>

    <!-- 用户中心 -->
    <div class="user-center">
      <!-- 左侧菜单 -->
      <aside class="sidebar">
        <div class="title">用户中心</div>
        <ul>
          <li
              class="menu-item"
              :class="{ active: activeTab === 'user-info' }"
              @click="activeTab = 'user-info'"
          >
            <img
                :src="activeTab === 'user-info' ? require('../assets/images/personInfoImg.png') : require('../assets/images/personInfoImg2.png')"
                alt="" style="width: 1.25vw;">
            <span>基本信息</span>
          </li>
          <li
              class="menu-item"
              :class="{ active: activeTab === 'service-record' }"
              @click="activeTab = 'service-record'"
          >
            <img
                :src="activeTab === 'service-record' ? require('../assets/images/personServiceImg.png') : require('../assets/images/personServiceImg2.png')"
                 alt="" style="width: 1vw; left: 2.06vw">
            <span>服务记录</span>
          </li>
          <li
              class="menu-item"
              :class="{ active: activeTab === 'person-favorite' }"
              @click="activeTab = 'person-favorite'"
          >
            <img
                :src="activeTab === 'person-favorite' ? require('../assets/images/personFavoriteImg2.png') : require('../assets/images/personFavoriteImg.png')"
                alt="" style="width: 1.19vw; left: 2vw">
            <span>我的收藏</span>
          </li>
          <li
              class="menu-item"
              :class="{ active: activeTab === 'person-credit' }"
              @click="activeTab = 'person-credit'"
          >
            <img
                :src="activeTab === 'person-credit' ? require('../assets/images/personCreditImg2.png') : require('../assets/images/personCreditImg.png')"
                 alt="" style="width: 1.375vw; left: 1.93vw">
            <span>信用评价</span>
          </li>
          <li
              class="menu-item"
              :class="{ active: activeTab === 'person-community' }"
              @click="activeTab = 'person-community'"
          >
            <img
                :src="activeTab === 'person-community' ? require('../assets/images/personCommunityImg2.png') : require('../assets/images/personCommunityImg.png')"
                alt="" style="width: 1.115vw; left: 2.11vw">
            <span>个人动态</span>
          </li>
          <li
              class="menu-item"
              :class="{ active: activeTab === 'person-accountSecurity' }"
              @click="activeTab = 'person-accountSecurity'"
          >
            <img
                :src="activeTab === 'person-accountSecurity' ? require('../assets/images/personSecurityImg.png') : require('../assets/images/personSecurityImg2.png')"
                alt="" style="width: 1.115vw; left: 2.11vw">
            <span>账号安全</span>
          </li>
        </ul>
        <div class="exit" @click="handleExit">
          <img src="../assets/images/exitImg.png" alt="">
          <span>退出登录</span>
        </div>

      </aside>

      <!-- 右侧信息展示区域 -->
      <section class="main-content">

        <!-- 基本信息 -->
        <div class="content-box" v-show="activeTab === 'user-info'">
          <div class="title">基本信息</div>
          <div class="user-header">
            <img :src="PersonData.avatar" alt="头像" class="avatar" />
            <input
                class="avatar-input"
                id="upload-avatar"
                type="file"
                accept="image/*"
                @change="handleAvatarChange"
            />

            <div class="box">
              <div class="user-name">{{ PersonData.name }}</div>
              <img class="user-gender" :src="isMale(PersonData.gender)" alt="">
            </div>
            <!--勾选是否对外显示真实姓名-->
            <div class="showName-box">
              <input class="showName" type="checkbox" id=""
                     :checked="PersonData.isNameShow === true"
                     @change="handleChangeInfo()"
                     v-model="PersonData.isNameShow"
              />
              <text class="showNameText">对外显示您的真实姓名</text>
            </div>

            <div class="info-complete">
              个人信息完整度{{ PersonData.ratio }}%
            </div>
          </div>

          <div class="user-info-detail">
            <p>
              <strong>身份：</strong> {{ PersonData.identity === 1 ? "社会人士" : "在校学生" }}
            </p>
            <p>
              <strong>所在城市：</strong>
              <span v-if="!isEditing.city">{{ PersonData.city }}</span>
              <input v-else v-model="PersonData.city" @blur="saveField('city')" />
              <img class="edit-icon" src="../assets/images/editIcon.png" alt="" @click="editField('city')" />
            </p>
            <p>
              <strong>出生日期：</strong>
              <span v-if="!isEditing.birthdate">{{ PersonData.birthdate }}</span>
              <input v-else type="date" v-model="PersonData.birthdate" @blur="saveField('birthdate')" />
              <img class="edit-icon" src="../assets/images/editIcon.png" alt="" @click="editField('birthdate')" />
            </p>
            <p v-show="PersonData.identity === 0">
              <strong>就读学校：</strong>
              <span v-if="!isEditing.school">{{ PersonData.school }}</span>
              <input v-else v-model="PersonData.school" @blur="saveField('school')" />
              <img class="edit-icon" src="../assets/images/editIcon.png" alt="" @click="editField('school')" />
            </p>
            <p v-show="PersonData.identity === 0">
              <strong>就读时间：</strong>
              <span v-if="!isEditing.date">{{ startDate }}</span>
              <span v-if="!isEditing.date">年9月</span>
              <span v-if="!isEditing.date" style="margin: 0 0.6vw">-</span>
              <span v-if="!isEditing.date">{{ endDate }}</span>
              <span v-if="!isEditing.date">年6月</span>

              <select v-if="isEditing.date"
                      v-model="startDate"
                      @blur="saveField('date')">
                <option v-for="year in years" :key="year" :value="year">{{ year }}</option>
              </select>
              <span v-if="isEditing.date">年9月</span>
              <span v-if="isEditing.date" style="margin: 0 0.6vw">-</span>
              <select v-if="isEditing.date" v-model="endDate"
                      @blur="saveField('date')">
                <option v-for="year in years" :key="year" :value="year">{{ year }}</option>
              </select>
              <span v-if="isEditing.date">年6月</span>

              <img class="edit-icon" src="../assets/images/editIcon.png" alt="" @click="editField('date')" />
            </p>
            <p v-show="PersonData.identity === 1" style="color: rgba(153, 153, 153, 1);">
              <strong>就读学校：</strong>/
            </p>
            <p v-show="PersonData.identity === 1" style="color: rgba(153, 153, 153, 1);">
              <strong>就读时间：</strong>/
            </p>
            <p>
              <strong>微信号：</strong>
              <span v-if="!isEditing.vxNumber">{{ PersonData.vxNumber }}</span>
              <input v-else v-model="PersonData.vxNumber" @blur="saveField('vxNumber')" />
              <img class="edit-icon" src="../assets/images/editIcon.png" alt="" @click="editField('vxNumber')" />
            </p>
            <p>
              <strong>个人简介：</strong>
              <span v-if="!isEditing.intro"
                    style="width: fit-content; max-width: 48vw; text-align: left"
              >{{ PersonData.intro }}</span>
              <textarea v-else v-model="PersonData.intro"
                     @blur="saveField('intro')"
                     style="width: 48vw; max-width: 48vw;"/>
              <img class="edit-icon" src="../assets/images/editIcon.png" alt="" @click="editField('intro')" />
            </p>
            <p>
              <strong>个人简历：</strong>
              <!-- 没简历，上传简历 -->
              <span class="resume-box" v-show="PersonData.resume ===''">
                <img class="img1" src="@/assets/images/wordResumeImg.png" alt="">
                <span class="text1">上传简历，更清晰地介绍自己</span>
                <span class="text2">支持PDF、DOC、DOCX等格式</span>
                <button class="upload-btn">
                  <input
                      class="resume-input"
                      id="upload-resume"
                      type="file"
                      accept="*.pdf *.doc"
                      @change="resumeChange"
                  />
                  <img src="../assets/images/arrow.png" alt="">
                  上传附件
                </button>
              </span>
              <!-- 有简历 -->
              <span class="resume-box" v-show="PersonData.resume !==''">
                <img class="img2" src="@/assets/images/pdfResumeImg.png" alt="">
                <a :href="PersonData.resume" class="resume-link">{{ PersonData.resumeName }}</a>
                <img class="delete-btn" @click="deleteResume" src="../assets/images/delete.png" alt="">
              </span>
            </p>
          </div>
        </div>

        <!-- 服务记录 -->
        <div class="content-box" v-show="activeTab === 'service-record'">
          <div class="title">服务记录</div>
          <div class="button-container">
            <div class="serviceTab" :class="{ active: serviceTab==='接单者' }"
                 @click="getRecords1">
              我是接单者
              <div v-show="serviceTab === '接单者'"></div>
            </div>
            <div class="serviceTab" :class="{ active: serviceTab==='发单者' }"
                 @click="getRecords2">
              我是发单者
              <div v-show="serviceTab === '发单者'"></div>
            </div>
          </div>
          <!-- 接单者内容 -->
          <div v-show="serviceTab === '接单者'" class="service-records">
            <div class="service-record" v-for="(record, index) in serviceRecords1" :key="index">
              <div class="box1">
                <div class="service-title">{{ record.name }}</div>
                <img class="team-img" src="../assets/images/teamUpTag.png" v-if="record.isGroup" alt="">
                <span class="service-money">{{ record.payment }}元/{{ record.unit }}</span>
              </div>
              <div class="box2">
                <img class="person-avatar" :src="record.avatarUrl" alt="">
                <div class="person-name">{{ record.senderNameShow }}</div>
                <img class="address-img" src="../assets/images/address2.png" alt="" />
                <span class="service-city">{{ record.region }}</span>
                <div :class="getStatusClass(record.status)">{{ getStatusText(record.status) }}</div>
              </div>
              <!-- 按钮 -->
              <button class="chat">联系对方</button>
              <button class="evaluate">去评价</button>
            </div>
          </div>
          <!-- 发单者内容 -->
          <div v-show="serviceTab === '发单者'" class="service-records">
            <div class="service-record" v-for="(record, index) in serviceRecords2" :key="index">
              <div class="box1">
                <div class="service-title">{{ record.name }}</div>
                <img class="team-img" src="../assets/images/teamUpTag.png" v-if="record.isGroup" alt="">
                <span class="service-money">{{ record.payment }}元/{{ record.unit }}</span>
              </div>
              <div class="box2">
                <div class="service-tags">
                  <span v-for="(tag, idx) in record.tags" :key="idx" class="tag">{{ tag }}</span>
                </div>
                <div :class="getStatusClass(record.status)">{{ getStatusText(record.status) }}</div>
              </div>
              <!-- 按钮 -->
              <button class="chat">联系对方</button>
              <button class="evaluate">去评价</button>
            </div>
          </div>
        </div>

        <!-- 我的收藏 -->
        <div class="content-box" v-show="activeTab === 'person-favorite'">
          <!-- 我的收藏内容 -->
          <p>我的收藏内容展示</p>
        </div>

        <!-- 信用评价 -->
        <div class="content-box" v-show="activeTab === 'person-credit'">
          <!-- 信用评价内容 -->
          <p>信用评价内容展示</p>
        </div>

        <!-- 个人动态 -->
        <div class="content-box" v-show="activeTab === 'person-community'">
          <!-- 个人动态内容 -->
          <p>个人动态内容展示</p>
        </div>

        <!-- 账号安全 -->
        <div class="content-box" v-show="activeTab === 'person-accountSecurity'">
          <!-- 账号安全内容 -->
          <div class="title" style="margin-bottom: 0.26vh;">基本信息</div>
          <div class="account-infobox">
            <div class="title">手机号码</div>
            <div class="now-info">当前手机号：{{ PersonData.phoneNumber }}</div>
            <button>修改手机号</button>
          </div>
          <div class="account-infobox">
            <div class="title">密码设置</div>
            <div class="now-info">当前登录账号：{{ PersonData.phoneNumber }}</div>
            <button @click="showChangePassword = true">密码设置</button>
          </div>
          <div class="account-infobox" style="border: none">
            <div class="title">我的身份</div>
            <div class="now-info">当前身份：我是{{ PersonData.identity ? '社会人士':'在校学生'}} </div>
            <button>身份修改</button>
          </div>
        </div>




      </section>
    </div>
    <!-- 背景遮罩 -->
    <div v-if="showChangePassword" class="overlay"></div>
    <!-- 修改密码弹窗 -->
    <div class="change-box" v-if="showChangePassword">
      <div class="title">
        修改密码
        <img src="../assets/images/delete.png" alt="" @click="showChangePassword = false">
      </div>
      <div class="text">
        手机号：
        <span>{{ PersonData.phoneNumber }}</span>
      </div>
      <div class="form-box">
        <span>验证码：</span>
        <input type="text" placeholder="请输入验证码" v-model="passwordChangeMsg.code">
        <button @click="handleSendMsg">获取验证码</button>
      </div>
      <div class="form-box">
        <span>新密码：</span>
        <input type="text" placeholder="请输入8-16位字母、数字、字符，不支持空格" v-model="newPassword1">
      </div>
      <div class="form-box">
        <input type="text" placeholder="请再次确认密码" style="margin-left: 4.18vw" v-model="passwordChangeMsg.password">
      </div>
      <div class="button-box">
        <button class="confirm-btn" @click="passwordConfirm">确定</button>
        <button class="cancel-btn" @click="showChangePassword = false">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
import TopBar from "@/components/TopBar.vue";
import {computed, onMounted, reactive, ref, watch, watchEffect} from "vue";
import {useAvatarUpload} from "@/api/uploadAvatar";
import {useResumeUpload} from "@/api/uploadResume";
import {changeInfo} from "@/api/changeInfo";
import {useStore} from "vuex";
import {sendMsg} from "@/api/sendMsg";
import {useChangePassword} from "@/api/changePassword";
/*import {useGetTaskRecordBySender} from "@/api/getTaskRecordsBySender";
import {useGetTaskRecordByReceiver} from "@/api/getTaskRecordsByReceiver";*/
import router from "@/router";
import {useRoute} from "vue-router";
import {useExitLogin} from "@/api/exitLogin";
import {useGetTaskRecordBySender} from "@/api/getTaskRecordsBySender";
import {useGetTaskRecordByReceiver} from "@/api/getTaskRecordsByReceiver";


export default {
  name: "UserCenterPage",
  components: {
    TopBar,
  },

  setup() {
    // 发送验证码请求
    const { handleSendMsg, phoneNumberVerify1, isSending } = sendMsg();

    const store = useStore(); // 获取 Vuex 实例
    // 获取 Vuex 中的 userInfo
    const userInfo = computed(() => store.getters.getUserInfo);
    // 本地数据，初始值为空，动态同步 Vuex 数据
    const PersonData = ref({
      name: "",          // 默认值为空字符串
      gender: "",        // 默认值为空字符串
      isNameShow: null, // 默认值为 false
      avatar: "",        // 默认值为空字符串
      identity: 0,       // 默认值为 0
      city: "",          // 默认值为空字符串
      birthdate: "",     // 默认值为空字符串
      school: "",        // 默认值为空字符串
      graduateYear: "",  // 默认值为空字符串
      vxNumber: "",      // 默认值为空字符串
      intro: "",         // 默认值为空字符串
      resume: "",        // 默认值为空字符串
      resumeName: "",
      ratio: 0,          // 默认值为 0
      phoneNumber: "" // 默认值为字符串类型的号码
    });
    // 动态同步 Vuex 的 userInfo 数据到 PersonData
    watchEffect(() => {
      PersonData.value = {
        ...PersonData.value, // 保留当前的本地数据
        name: userInfo.value?.name || "",
        isNameShow: userInfo.value?.isNameShow || "",
        gender: userInfo.value?.gender || "",
        avatar: userInfo.value?.avatar || "",
        identity: userInfo.value?.identity || 0,
        city: userInfo.value?.city || "",
        birthdate: userInfo.value?.birthdate || "",
        school: userInfo.value?.school || "",
        graduateYear: userInfo.value?.graduateYear || "",
        vxNumber: userInfo.value?.vxNumber || "",
        intro: userInfo.value?.intro || "",
        resume: userInfo.value?.resume || "",
        resumeName: userInfo.value?.resumeName || "",
        ratio: userInfo.value?.ratio || 0,
        phoneNumber: userInfo.value?.phoneNumber || "" // 使用 Vuex 数据或默认值
      };
      phoneNumberVerify1.value = userInfo.value?.phoneNumber || "";
    });
    // 接单任务信息
    const receivedServiceRecords = computed(() => store.getters.getReceivedServiceRecords);
    const serviceRecords1 = ref([
      {
        senderPhoneNumber: "",
        name: "",
        type: null,
        payment: null,
        unit: "",
        isPaymentNegotiable: true,
        deadline: "",
        region: "",
        description: "",
        tags: [],
        imgUrls: [],
        attachmentUrl: "",
        isGroup: true,
        peopleNumber: 0,
        status: 0,
        avatarUrl: "",
        ifOnline: 0,
        senderNameShow: "",
        attachmentName: "",
      },
    ]);
    watchEffect(() => {
      serviceRecords1.value = receivedServiceRecords.value.map((record) => ({
        senderPhoneNumber: record.senderPhoneNumber || "未知号码",
        name: record.name || "未命名服务",
        type: record.type || 0,
        payment: record.payment || 0,
        unit: record.unit || "次",
        isPaymentNegotiable: record.isPaymentNegotiable || false,
        deadline: record.deadline || "",
        region: record.region || "未知地区",
        description: record.description || "暂无描述",
        tags: record.tags || [],
        imgUrls: record.imgUrls || [],
        attachmentUrl: record.attachmentUrl || "",
        isGroup: record.isGroup || false,
        peopleNumber: record.peopleNumber || 1,
        status: record.status || 0,
        avatarUrl:
            record.avatarUrl ||
            "https://img.js.design/assets/img/default-avatar.jpg", // 默认头像链接
        ifOnline: record.ifOnline || 0,
        senderNameShow: record.senderNameShow || "匿名用户",
        attachmentName: record.attachmentName || "",
      }));
    });
    //发单任务信息
    const sentServiceRecords = computed(() => store.getters.getSentServiceRecords);
    const serviceRecords2 = ref([
      {
        senderPhoneNumber: "",
        name: "",
        type: null,
        payment: null,
        unit: "",
        isPaymentNegotiable: true,
        deadline: "",
        region: "",
        description: "",
        tags: [],
        imgUrls: [],
        attachmentUrl: "",
        isGroup: true,
        peopleNumber: 0,
        status: 0,
        avatarUrl: "",
        ifOnline: 0,
        senderNameShow: "",
        attachmentName: "",
      },
    ]);
    watchEffect(() => {
      serviceRecords2.value = sentServiceRecords.value.map((record) => ({
        senderPhoneNumber: record.senderPhoneNumber || "未知号码",
        name: record.name || "未命名服务",
        type: record.type || 0,
        payment: record.payment || 0,
        unit: record.unit || "次",
        isPaymentNegotiable: record.isPaymentNegotiable || false,
        deadline: record.deadline || "",
        region: record.region || "未知地区",
        description: record.description || "暂无描述",
        tags: record.tags || [],
        imgUrls: record.imgUrls || [],
        attachmentUrl: record.attachmentUrl || "",
        isGroup: record.isGroup || false,
        peopleNumber: record.peopleNumber || 1,
        status: record.status || 0,
        avatarUrl:
            record.avatarUrl ||
            "https://img.js.design/assets/img/default-avatar.jpg", // 默认头像链接
        ifOnline: record.ifOnline || 0,
        senderNameShow: record.senderNameShow || "匿名用户",
        attachmentName: record.attachmentName || "",
      }));
    });

    const getStatusClass = (status) => {
      switch (status) {
        case 0:
          return 'published';
        case 1:
          return 'published';
        case 2:
          return 'ongoing';
        case 3:
          return 'finish';
        default:
          return '';
      }
    };
    const getStatusText = (status) => {
      switch (status) {
        case 0:
          return '已发布';
        case 1:
          return '已发布';
        case 2:
          return '进行中';
        case 3:
          return '已完成';
        default:
          return '';
      }
    };

    // 修改密码弹窗
    const showChangePassword = ref(false)
    const newPassword1 = ref("")
    const passwordChangeMsg =ref({
      password:"",
      code:""
    })
    // 确认修改密码
    const passwordConfirm = ()=>{
      if(passwordChangeMsg.value.code === "")
      {
        alert("请输入验证码")
      }
      else if(newPassword1.value === "" || passwordChangeMsg.value.password === ""){
        alert("请输入密码")
      }
      else if(newPassword1.value !== passwordChangeMsg.value.password) {
        alert("密码不一致，请重新输入")
      }
      else{
        handleChangePassword();
        showChangePassword.value = false;
      }
    }

    const { handleChangeInfo, isLoading0 } = changeInfo(PersonData);
    const { handleAvatarChange,isLoading } = useAvatarUpload(PersonData);
    const { handleResumeChange,isLoading2 } = useResumeUpload(PersonData);

    const { handleChangePassword, isLoading3 } = useChangePassword(passwordChangeMsg);
    const { handleExitLogin, isLoading6 } = useExitLogin();
    const { handleGetTaskRecordByReceiver, isLoading4 } = useGetTaskRecordByReceiver(serviceRecords1);
    const { handleGetTaskRecordBySender, isLoading7 } = useGetTaskRecordBySender(serviceRecords2);
    // 在页面加载时调用两个接口
    onMounted(() => {
      handleGetTaskRecordByReceiver();
      handleGetTaskRecordBySender();
    });


    const startDate = ref("2022")
    const endDate = ref("2026")



    // 当前选中的菜单项
    const activeTab = ref("user-info");
    // 发单者或接单者
    const serviceTab = ref('接单者');
    const getRecords1 = () => {
      serviceTab.value='接单者';
     /* handleGetTaskRecordByReceiver();*/
    };
    const getRecords2 = () => {
      serviceTab.value='发单者';
      /*handleGetTaskRecordBySender();*/
    }
    const route = useRoute();
    onMounted(() => {
      const query = route.query;
      activeTab.value = query.activeTab || "user-info";
      serviceTab.value = query.serviceTab || "接单者";
    });

    // 显示性别图标
    const isMale = (gender) => {
      if (gender === "male") {
        return require('../assets/images/male.png');
      } else if (gender === "female") {
        return require('../assets/images/female.png');
      } else {
        return '';
      }
    };

    // 信息编辑状态
    const isEditing = reactive({
      city: false,
      birthdate: false,
      school: false,
      date: false,
      vxNumber: false,
      intro: false,
      isNameShow: false,
    });
    const editField = (field) => {
        isEditing[field] = true;
    };
    const saveField = async (field) => {
      isEditing[field] = false; // 退出编辑模式
      await handleChangeInfo(); // 调用封装的 API 方法
      console.log(`Field ${field} saved:`, PersonData.value);
    };
    const resumeChange = async (event) => {
      await handleResumeChange(event);
      await handleChangeInfo();
    }
    // 生成年份选项（使用计算属性）
    const years = computed(() => generateYearOptions());
    // 生成年份选项方法
    const generateYearOptions = () => {
      const startYear = 1920; // 起始年份
      const endYear = 2099;   // 结束年份
      const yearOptions = [];
      for (let year = endYear; year >= startYear; year--) {
        yearOptions.push(year);
      }
      return yearOptions;
    };
    // 监听入学时间变化
    watch(startDate, (newStartDate) => {
      if (newStartDate && (!endDate.value || parseInt(endDate.value) - parseInt(newStartDate) !== 4)) {
        endDate.value = String(parseInt(newStartDate) + 4); // 将计算结果转换为字符串
      }
    });
    // 监听毕业时间变化
    watch(endDate, (newEndDate) => {
      if (newEndDate && (!startDate.value || parseInt(newEndDate) - parseInt(startDate.value) !== 4)) {
        startDate.value = String(parseInt(newEndDate) - 4); // 默认入学时间为毕业时间-4年
      }
      // 自动填充 formData.graduateYear 为 "毕业年份 + 6月"
      PersonData.value.graduateYear = newEndDate ? `${newEndDate}年6月` : '';
    });

    // 删除简历
    const deleteResume = () => {
      if (window.confirm('确定要删除简历吗？')) {
        PersonData.value.resume = '';
        PersonData.value.resumeName = '';
        handleChangeInfo();
      }
    };

    // 退出登录的处理函数
    const handleExit = () => {
      handleExitLogin();
      // 跳转到登录页面
      router.push("/login"); // 假设你有一个登录页
    };


    return {
      PersonData,
      activeTab,
      isMale,
      serviceTab,
      serviceRecords1,
      serviceRecords2,
      getStatusClass,
      getStatusText,
      isEditing,
      editField,
      saveField,
      startDate,
      endDate,
      years,
      handleAvatarChange,
      isLoading,
      handleResumeChange,
      isLoading2,
      deleteResume,
      handleChangeInfo,
      isLoading0,
      showChangePassword,
      handleSendMsg,
      isSending,
      phoneNumberVerify1,
      newPassword1,
      passwordConfirm,
      isLoading3,
/*      handleGetTaskRecordByReceiver,
      handleGetTaskRecordBySender,
      isLoading4,
      isLoading5,*/
      getRecords1,
      getRecords2,
      resumeChange,
      passwordChangeMsg,
      handleExit,
      handleExitLogin,
      isLoading4,
      isLoading6,
      isLoading7
    };
  },
};
</script>

<style scoped>
.container {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  overflow-x: hidden; /* 禁止横向滚动条 */
  overflow-y: hidden;
  background: rgba(242, 244, 245, 1);
}
.user-center {
  position: absolute;
  width: 78.125vw;
  height: 83.15vh;
  left: 10.9375vw;
  bottom: 5.926vh;
  border-radius: 0.833vw;
  display: flex;
  font-family: Arial, sans-serif;
  background: rgba(242, 244, 245, 1);
}
.sidebar {
  position: absolute;
  height: 83.15vh;
  left: 0;
  top: 0;
  width: 14.583vw;
  border-radius: 0.833vw;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.sidebar .title{
  position: absolute;
  left: 1.875vw;
  top: 2.963vh;
  font-size: 1.1458vw;
  font-weight: 700;
  color: rgba(32, 32, 32, 1);
}
.sidebar ul{
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 8.889vh;
  box-sizing: border-box;
  width: 100%;
}
.sidebar .menu-item {
  list-style: none;
  width: 100%;
  height: 5.9vh;
  line-height: 5.556vh;
  font-size: 0.9375vw;
  color: rgba(102, 102, 102, 1);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.sidebar .menu-item img{
  width: 1.1458vw;
  position: absolute;
  left: 1.9271vw;
}
.sidebar .menu-item span{
  position: absolute;
  left: 3.96vw;
}
.sidebar .menu-item.active {
  color: rgba(13, 127, 233, 1);
  font-weight: 700;
  background-color: rgba(13, 127, 233, 0.1);
  border-left: 0.2083vw solid rgba(13, 127, 233, 1);
}
.sidebar .exit{
  position: absolute;
  left: 1.9271vw;
  bottom: 4.45vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
.sidebar .exit:hover{
  font-weight: 550;
}
.sidebar .exit img{
  width: 2.1vh;
  height: 2.1vh;
  margin-right: 0.833vw;
}
.sidebar .exit span{
  font-size: 0.9375vw;
  line-height: 2.02vh;
  color: rgba(102, 102, 102, 1);
}
.main-content {
  position: absolute;
  flex-grow: 1;
  right: 0;
  top: 0;
  height: 83.15vh;
  width: 63.125vw;
  border-radius: 0.833vw;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  box-sizing: content-box;
}
.content-box {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0.833vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 2.963vh 1.875vw;
}
.content-box .title{
  position: relative;
  left: 0;
  font-size: 1.0417vw;
  font-weight: 700;
  color: rgba(32, 32, 32, 1);
  margin-bottom: 3.5vh;
}
/* 基本信息 */
.user-header {
  position: relative;
  width: 59vw;
  height: 9.26vh;
  margin-bottom: 2.8vh;
}
.avatar {
  position: absolute;
  left: 0;
  width: 9.26vh;
  height: 9.26vh;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
}
.avatar-input{
  position: absolute;
  left: 0;
  width: 9.26vh;
  height: 9.26vh;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0;
  cursor: pointer;
}
.user-header .box{
  position: absolute;
  left: 6.3vw;
  top: 0.2vh;
  width: fit-content;
  height: 2.77vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.showName-box{
  position: relative;
  left: 6.3vw;
  top: 4.07vh;
  width: fit-content;
  height: 2.22vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
 }
.showName-box .showName{
  height: 1.7vh;
  margin-left: 0;
  margin-right: 0.417vw;
}
.showName-box .showNameText{
  line-height: 2.22vh;
  font-size: 0.8vw;
  color: rgba(102, 102, 102, 1);
}
.user-name{
  position: relative;
  font-size: 1.0417vw;
  line-height: 2.77vh;
  color: rgba(32, 32, 32, 1);
  margin-right: 0.625vw;
  white-space: nowrap;
}
.user-gender{
  position: relative;
  height: 1.852vh;
  width: 1.852vh;
}
.info-complete{
  position: absolute;
  left: 6.3vw;
  top: 7.13vh;
  width: fit-content;
  font-size: 0.833vw;
  color: rgba(102, 102, 102, 1);
}
.user-info-detail{
  position: relative;
  width: 59vw;
  height: 56vh;
  overflow-x: hidden;
  overflow-y: scroll;
}
.user-info-detail::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.user-info-detail p {
  width: fit-content;
  max-width: 59vw;
  min-height: 2.5vh;
  max-height: 7.5vh;
  height: fit-content;
  line-height: 2.5vh;
  display: flex;
  align-items: flex-start;
  margin-bottom: 4.13vh;
  font-size: 0.9375vw;
  color: rgba(32, 32, 32, 1);
  overflow: hidden;
}
.user-info-detail strong{
  position: relative;
  margin-right: 0.82vw;
}
.user-info-detail p input{
  height: 2.5vh;
  font-size: 0.9vw;
  border: 0.1vw solid rgba(217, 217, 217, 1);
  border-radius: 0.33vw;
  color: rgba(102, 102, 102, 1);
  padding: 0.2vw;
}
.user-info-detail p input:focus{
  outline: none;
}
.user-info-detail p select{
  width: 4.3vw;
  /*height: 3vh;*/
  font-size: 0.9vw;
  border-radius: 0.33vw;
  margin-right: 0.3vw;
  border: 0.1vw solid rgba(217, 217, 217, 1);
  color: rgba(102, 102, 102, 1);
}
.user-info-detail p textarea{
  text-align: left;
  height: 7.5vh;
  line-height: 2.5vh;
  box-sizing: border-box;
  padding: 0.2vw;
  font-size: 0.9375vw;
  color: rgba(32, 32, 32, 1);
  border-radius: 0.417vw;
  border: 0.1vw solid rgba(217, 217, 217, 1);
  resize: none;
}
.user-info-detail p textarea::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.resume-box{
  position: relative;
  width: 21vw;
  height: 7.5vh;
  border-radius: 0.537vw;
  background: rgba(255, 255, 255, 1);
  border: 0.1vw solid rgba(217, 217, 217, 1);
  box-sizing: border-box;
}
.resume-box .img1{
  position: absolute;
  left: 0.417vw;
  top: 0.926vh;
  width: 5.2vh;
  height: 5.2vh;
}
.resume-box .img2{
  position: absolute;
  left: 1.041vw;
  top: 1.6vh;
  width: 3.9vh;
  height: 3.9vh;
}
.resume-box .text1{
  position: absolute;
  left: 3.3vw;
  top: 1.25vh;
  font-size: 0.729vw;
  color: rgba(102, 102, 102, 1);
}
.resume-box .text2{
  position: absolute;
  left: 3.3vw;
  bottom: 1.10vh;
  font-size: 0.625vw;
  color: rgba(153, 153, 153, 1);
}
.resume-box .upload-btn{
  position: absolute;
  right: 1.04vw;
  top: 2.13vh;
  width: 5.729vw;
  height: 2.9vh;
  line-height: 2.6vh;
  border-radius: 14.11vw;
  background: rgba(238, 113, 62, 1);
  border: none;
  font-size: 0.715vw;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  padding-left: 1.3vw;
  cursor: pointer;
  overflow: hidden;
}
.resume-box .upload-btn:hover{
  background-color: #ED843E;
}
.resume-input{
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 14.11vw;
  border: none;
  cursor: pointer;
  opacity: 0;
}
.resume-box .upload-btn img{
  position: absolute;
  top: 0.48vh;
  left: 0.87vw;
  width: 1.6vh;
  height: 1.6vh;
  cursor: pointer;
}
.resume-box .delete-btn{
  position: absolute;
  width: 1.52vh;
  height: 1.52vh;
  top: 2.77vh;
  right: 1.04vw;
  cursor: pointer;
}
.edit-icon {
  margin-top: 0.07vw;
  margin-left: 1.1vw;
  width: 2.1vh;
  height: 2.1vh;
  cursor: pointer;
}
.resume-link {
  position: absolute;
  text-decoration: none;
  left: 4vw;
  font-size: 0.9375vw;
  line-height: 7.5vh;
  color: rgba(32, 32, 32, 1);
}
/* 服务记录 */
.button-container{
  position: relative;
  width: fit-content;
  height: 2.5vh;
  display: flex;
  flex-direction: row;
  margin-bottom: 3.413vh;
}
.serviceTab{
  width: 4.6875vw;
  height: 2.5vh;
  line-height: 2.5vh;
  text-align: center;
  font-size: 0.9375vw;
  font-weight: 400;
  color: rgba(32, 32, 32, 1);
  margin-right: 2.36vw;
  cursor: pointer;
  position: relative;
  z-index: 0;
}
.serviceTab.active{
  font-weight: 600;
}
.serviceTab div{
  position: absolute;
  bottom: 0;
  width: 4.6875vw;
  height: 0.55vh;
  background: rgba(238, 113, 62, 1);
  z-index: -1;
}
.service-records{
  width: 59.375vw;
  height: 63.28vh;
  overflow-x: hidden;
  overflow-y: scroll;
  display: block;
  flex-direction: column;
  box-sizing: border-box;
}
.service-records::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.service-record{
  position: relative;
  width: 59.375vw;
  height: 9.26vh;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(217, 217, 217, 1);
  margin-bottom: 1.85vh;
}
.service-record .box1{
  position: absolute;
  top: 0;
  width: fit-content;
  height: 2.5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.service-title{
  position: relative;
  line-height: 2.5vh;
  font-size: 0.9375vw;
  font-weight: 550;
  color: rgba(32, 32, 32, 1);
}
.team-img{
  position: relative;
  width: 1.1vw;
  height: 1.1vw;
  margin-left: 0.833vw;
}
.service-money {
  position: relative;
  font-size: 0.9375vw;
  font-weight: 600;
  color: rgba(238, 113, 62, 1);
  margin-left: 1.875vw;
}
.service-record .box2{
  position: absolute;
  bottom: 1.85vh;
  width: fit-content;
  height: 3.33vh;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.service-record .box2 .person-avatar{
  position: relative;
  height: 3.33vh;
  width: 3.33vh;
  margin-right: 0.98vw;
  border-radius: 50%;
}
.service-record .box2 .person-name{
  font-size: 0.833vw;
  color: rgba(32, 32, 32, 1);
}
.service-record .box2 .address-img{
  position: relative;
  width: 0.73vw;
  margin-left: 1.875vw;
  margin-right: 0.2vw;
}
.service-record .box2 .service-city{
  position: relative;
  font-size: 0.63vw;
  color: rgba(102, 102, 102, 1);
  margin-right: 2.8vw;
}
.service-record .box2 .service-tags{
  width: fit-content;
  height: 2.28vh;
  position: relative;
  display: flex;
  gap: 0 0.833vw;
  margin-right: 1.6vw;
}
.service-record .box2 .service-tags .tag{
  position: relative;
  display: inline-block;
  padding: 0 1vw;
  width: fit-content;
  height: 2.28vh;
  border-radius: 6.5625vw;
  background: rgba(255, 255, 255, 1);
  border: 0.0521vw solid rgba(153, 153, 153, 1);
  font-size: 0.625vw;
  line-height: 2.0371vh;
  color: rgba(102, 102, 102, 1);
  box-sizing: border-box;
}
.service-record .box2 .finish{
  width: 2.815vw;
  height: 2.408vh;
  line-height: 2.408vh;
  border-radius: 0.209vw;
  background: rgba(67, 207, 124, 0.15);
  font-size: 0.625vw;
  color: rgba(67, 207, 124, 1);
}
.service-record .box2 .ongoing{
  width: 2.815vw;
  height: 2.408vh;
  line-height: 2.408vh;
  border-radius: 0.209vw;
  font-size: 0.625vw;
  background: rgba(250, 167, 0, 0.15);
  color: rgba(250, 167, 0, 1);
}
.service-record .box2 .published{
  width: 2.815vw;
  height: 2.408vh;
  line-height: 2.408vh;
  border-radius: 0.209vw;
  font-size: 0.625vw;
  background: rgba(121, 72, 234, 0.15);
  color: rgba(121, 72, 234, 1);
}
.service-record .chat{
  position: absolute;
  left: 45.21vw;
  top: 1.85vh;
  width: 6.25vw;
  height: 3.704vh;
  border-radius: 5.21vw;
  border: 0.10417vw solid rgba(13, 127, 233, 1);
  font-size: 0.833vw;
  font-weight: 550;
  color: rgba(13, 127, 233, 1);
  background: rgba(255, 255, 255, 1);
  box-sizing: border-box;
}
.service-record .evaluate{
  position: absolute;
  left: 53.125vw;
  top: 1.85vh;
  width: 6.25vw;
  height: 3.704vh;
  border-radius: 5.21vw;
  font-size: 0.833vw;
  font-weight: 550;
  color: rgba(255, 255, 255, 1);
  border: none;
  background: linear-gradient(90deg, rgba(14, 127, 232, 1) 0%, rgba(0, 95, 204, 1) 100%);
}
/* 账号安全 */
.account-infobox{
  width: 100%;
  height: 22.778vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-bottom: 0.00521vw solid rgba(217, 217, 217, 1);;
}
.account-infobox .title{
  margin-top: 4.19vh;
  font-size: 0.9375vw;
  font-weight: 550;
  color: rgba(32, 32, 32, 1);
  margin-bottom: 2.778vh;
}
.account-infobox .now-info{
  font-size: 0.9375vw;
  font-weight: 400;
  color: rgba(32, 32, 32, 1);
  margin-bottom: 2.778vh;
}
.account-infobox button{
  width: 6.25vw;
  height: 3.33vh;
  border-radius: 5.21vw;
  background: linear-gradient(221.64deg, rgba(238, 113, 62, 1) 0%, rgba(255, 140, 26, 1) 100%);
  font-size: 0.833vw;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  border: none;
  cursor: pointer;
}
/* 修改密码弹窗 */
.change-box{
  position: absolute;
  left: 33.4375vw;
  top: 27.22vh;
  width: 33.125vw;
  height: 45.55vh;
  border-radius: 1.667vw;
  background: rgba(255, 255, 255, 1);
  padding-left: 1.875vw;
  padding-right: 2.083vw;
  z-index: 1000;
  box-sizing: border-box;
}
.change-box .title{
  position: relative;
  margin-top: 3.7vh;
  font-size: 1.0417vw;
  text-align: left;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-bottom: 3.33vh;
  font-weight: 550;
}
.change-box .title img{
  width: 2vh;
  float: right;
  cursor: pointer;
}
.change-box .text{
  font-size: 0.9375vw;
  color: rgba(32, 32, 32, 1);
  text-align: left;
  vertical-align: top;
  margin-bottom: 2.963vh;
}
.change-box .text span{
  margin-left: 0.417vw;
}
.change-box .form-box{
  width: 100%;
  height: 4.45vh;
  line-height: 4.45vh;
  box-sizing: border-box;
  margin-bottom: 2.963vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}
.change-box .form-box span{
  height: 4.45vh;
  line-height: 4.45vh;
  font-size: 0.9375vw;
  color: rgba(32, 32, 32, 1);
}
.change-box .form-box input{
  width: 25.0079vw;
  margin-left: 0.417vw;
  height: 4.45vh;
  border-radius: 0.417vw;
  border: 0.00521vw solid rgba(199, 199, 199, 1);
  padding-left: 0.833vw;
  box-sizing: border-box;
}
.change-box .form-box input::placeholder{
  font-size: 0.833vw;
  color: rgba(153, 153, 153, 1);
  text-align: left;
}
.change-box .form-box button{
  position: absolute;
  right: 0;
  width: 5.8vw;
  height: 4.45vh;
  border-radius: 0 0.417vw 0.417vw 0;
  font-size: 0.833vw;
  background: rgba(255, 255, 255, 1);
  color: rgba(238, 113, 62, 1);
  border: 0.00521vw solid rgba(199, 199, 199, 1);
  border-left: none;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
}
.change-box .button-box{
  width: 100%;
  height: 3.71vh;
  display: flex;
  flex-direction: row-reverse;
  gap: 0 1.875vw;
}
.change-box .cancel-btn{
  width: 6.25vw;
  height: 3.71vh;
  border-radius: 5.21vw;
  background: rgba(199, 199, 199, 1);
  border: none;
  font-size: 0.833vw;
  font-weight: 550;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.change-box .confirm-btn{
  width: 6.25vw;
  height: 3.71vh;
  border-radius: 5.21vw;
  background: linear-gradient(221.64deg, rgba(238, 113, 62, 1) 0%, rgba(255, 140, 26, 1) 100%);
  border: none;
  font-size: 0.833vw;
  font-weight: 550;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.overlay {
  position: fixed;
  top: 6.48vh;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(32, 32, 32, 0.5);
  z-index: 999; /* 保证遮罩层在最前 */
}
input:focus{
  outline: none;
}
select:focus{
  outline: none;
}
textarea:focus{
  outline: none;
}
</style>

